import React from "react";
import { useState } from "react";
import "./TodoHeader.css";

export default function TodoHeader(props) {
  //1. 声明状态 管理 input 元素的值
  let [value, setValue] = useState("");
  //获得 addTodo 的函数
  let {addTodo} = props;

  return (
    <div className="todo-header">
      {/* 2. 设置 value 属性为状态值    */}
      <input
        type="text"
        value={value}
        placeholder="请输入你的任务名称，按回车键确认"
        onChange={(e) => {
          //3. 绑定 onChange 事件, 更新 value 状态的值 
          setValue(e.target.value);
        }}
        onKeyUp={(e) => {
          // if(e.keyCode === 13){  //不赞成的写法
          if(e.code === 'Enter'){
            //新增任务 value
            addTodo(value);
            //清空 input 框的值
            setValue('');
          }
        }}
      />
    </div>
  );
}
